<template>
  <div class="command-content body-2">
    <div class="command-desc">/** {{ command.description }} **/</div>
    <span class="command-name" @click.native="commandClicked">{{ command.name }}</span>
    (
    <span v-for="(parameter, index) in command.parameters" :key="parameter.name">
      <span v-if="index > 0">,</span>
      <strong v-if="parameter.required">
        <span class="command-param-name">{{ parameter.name }}</span>:
        <span class="command-param-type">{{ parameter.type }}</span>
      </strong>
      <span v-else>
        <span class="command-param-name">{{ parameter.name }}</span>:
        <span class="command-param-type">{{ parameter.type }}</span>
      </span>
    </span>
    )
  </div>
</template>

<script>
export default {
  data: () => ({}),

  props: ["command"],

  methods: {}
};
</script>

<style scoped>
.command-content {
  font-family: "courier new";
  width: 100%;
}

.command-token {
  font-weight: 700;
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ccc;
}

.command-desc {
  color: #060;
  font-style: italic;
  max-width: 90%;
}

.command-name {
  color: #060;
  font-weight: bold;
}

.command-param-name {
  color: #333;
}

.command-param-type {
  color: #666;
}
</style>
